अगर आप डिज़ाइन नहीं कर सकते हैं तो भी एक शानदार दिखने वाली वेबसाइट कैसे बनाएं

क्या यह परिचित लगता है - आपके पास एक अच्छा विचार है, आप उस विचार का निर्माण करते हैं, आप अंतिम परिणाम को देखना शुरू करते हैं और सोचते हैं ... यह भयानक लग रहा है।

और सबसे बुरी बात, आप नहीं जानते कि इसे कैसे ठीक किया जाए। आखिर हम डिवेलपर हैं, डिजाइनर नहीं।

सौभाग्य से, आपको एक अद्भुत डिजाइनर होने की आवश्यकता नहीं है। आपको बस साधन संपन्न होने और कुछ सरल डिज़ाइन युक्तियों को समझने की आवश्यकता है। आपके डिज़ाइन कौशल की कमी को पूरा करने के लिए इंटरनेट मुफ्त टूल और संसाधनों से भरा है।

मैं आपको यह दिखाने जा रहा हूं कि उन संसाधनों का लाभ कैसे उठाया जाए ताकि आप कुछ ऐसा बना सकें जिस पर आपको गर्व हो।

यह मार्गदर्शिका उन उपकरणों, तकनीकों और संसाधनों को कवर करेगी जिनका उपयोग मैं वेबसाइटों को डिजाइन करने के लिए करता हूं। यह अंत नहीं है सब कुछ है लेकिन यह उन लोगों के लिए एक महान दिशानिर्देश है जो डिजाइन के साथ संघर्ष करते हैं। हम DesignDo नामक एक एप्लिकेशन बनाने जा रहे हैं। यह डिज़ाइन युक्तियों और संसाधनों का एक संग्रह होगा (इसलिए मेटा!)। हम जो कुछ भी उपयोग करते हैं वह 100% मुफ़्त होगा। इस पोस्ट के बिंदु पर अपना ध्यान केंद्रित रखने के लिए, हम फ्रंट-एंड फ्रेमवर्क का उपयोग नहीं करेंगे। बस स्थिर एचटीएमएल।

योजना

एक सीएसएस फ्रेमवर्क का प्रयोग करें

क्या आपने कभी किसी ऐसे व्यक्ति के साथ गेंदबाजी की है जो इसमें भयानक है? उन्होंने उन बंपर को गली में डाल दिया ताकि वे गटर बॉल न फेंक सकें? CSS फ्रेमवर्क आपका बम्पर है। उनके साथ "गटर बॉल" फेंकना लगभग असंभव है। वे आपको एक महान प्रारंभिक बिंदु देंगे और बाधाओं को भी प्रदान करेंगे जो एक देव जो डिजाइन की जरूरतों के साथ संघर्ष करता है।

मैं टेलविंड सीएसएस की सिफारिश करूंगा। यह उन वर्गों का उपयोग करता है जो सीएसएस गुणों के सार हैं। यह सीएसएस सीखने के लिए प्रशिक्षण पहियों के रूप में कार्य करता है और इसके साथ शानदार दिखने वाली साइटें बनाना आसान है। यहां डॉक्स पढ़ें।

इसके अलावा, यदि आप रिएक्ट या वीयू जैसे फ्रंट-एंड फ्रेमवर्क का उपयोग नहीं कर रहे हैं, तो मैं अल्पाइन जेएस का उपयोग करने का सुझाव दूंगा। मोबाइल उपकरणों पर अपने नेविगेशन को हैमबर्गर मेनू में बदलने जैसे सरल UI परिवर्तनों के लिए यह बहुत अच्छा है।

रंग की

इसे सरल रखें।

एक सफेद पृष्ठभूमि और काले या गहरे भूरे रंग के टेक्स्ट का प्रयोग करें। यदि आपके पास एक बटन जैसे गहरे पृष्ठभूमि रंग वाले क्षेत्र में काला टेक्स्ट है, तो उसे सफेद में बदलें।

आपके लोगो के लिए 1 प्राथमिक रंग और कॉल टू एक्शन बटन। उन चीज़ों के लिए इसे कम से कम उपयोग करें जिन्हें आप अपने डिज़ाइन में "बाहर खड़े" करना चाहते हैं।

सफेद पृष्ठभूमि से कार्डों को अलग दिखाने के लिए द्वितीयक रंग हल्के रंग के होने चाहिए। सबसे आसान तरीका यह है कि इसके लिए विभिन्न हल्के रंगों का उपयोग किया जाए। वे सब कुछ के साथ जाते हैं।

अपनी साइट के व्यक्तित्व का निर्धारण करें

हर साइट का एक व्यक्तित्व होता है। वे गंभीर और व्यवसायिक हो सकते हैं। वे मज़ेदार और हल्के-फुल्के भी हो सकते हैं। पता लगाएँ कि आप अपनी साइट का व्यक्तित्व क्या चाहते हैं। यह आपके द्वारा उपयोग किए जा रहे कुछ CSS गुणों को निर्धारित करेगा। पता लगाओ? अच्छा।

अब, यदि आपने गंभीर चुना है, तो मैं इसका उपयोग करने का सुझाव देता हूं:

• फ़ॉन्ट : डिफ़ॉल्ट टेलविंड सीएसएस फ़ॉन्ट का उपयोग करें। आपको कुछ भी कॉन्फ़िगर करने की आवश्यकता नहीं होगी।
• सीमा त्रिज्या : सीमा त्रिज्या का प्रयोग न करें। स्क्वायर बटन और बॉक्स गंभीर वाइब्स देते हैं।
• रंग : आपके प्राथमिक रंग के लिए, गहरा नीला, हरा, ग्रे और बैंगनी सभी बेहतरीन विकल्प हैं।

यदि आपने fun चुना है, तो मैं इसका उपयोग करने का सुझाव देता हूं:

• फ़ॉन्ट : टेलविंड डिफ़ॉल्ट या आउटफिट
• बॉर्डर रेडियस : मध्यम से बड़े बॉर्डर रेडियस का उपयोग करें। हालांकि 1 चुनें। विभिन्न सीमा-त्रिज्या आकारों को न मिलाएं। इसे सुसंगत रखें।
• रंग: आपके प्राथमिक रंग के लिए, आपके पास बहुत सारे विकल्प हैं। हालांकि मैं हल्का जीवंत रंग सुझाऊंगा।

प्रेरणा पाएं

ठीक है, तो आपको इस बात का अंदाजा है कि आपकी साइट किस व्यक्तित्व को अपनाएगी। अब अपनी रचनात्मकता को जगाने के लिए कुछ प्रेरणा खोजें। किसी के डिज़ाइन को T या उनके कोड में कॉपी न करें। इसे अपने उत्तर सितारा के रूप में प्रयोग करें।

वेब डिजाइन प्रेरणा साइटें

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

मेरी पसंद

DesignDo एक मजेदार/रचनात्मक साइट होगी। मैं डिफ़ॉल्ट टेलविंड फ़ॉन्ट और बटन और कार्ड पर एक बड़ी सीमा त्रिज्या का उपयोग करूँगा। मैं अपने प्राथमिक रंग के रूप में हल्के बैंगनी रंग का भी उपयोग करूंगा।

मैं अपनी प्रेरणा के रूप में इस वेबसाइट टेम्पलेट का उपयोग करूँगा...

इसमें एक अच्छा नायक अनुभाग है जहां मैं अपनी साइट क्या है और एक लंबवत सूची के बारे में कुछ प्रतिलिपि डाल सकता हूं, जिसे मुझे अपनी डिज़ाइन युक्तियों और संसाधनों को सूचीबद्ध करने की आवश्यकता होगी।

कठोर परिश्रम की जगह बुद्धिमानी से काम करो

विकास और डिजाइन में बेहतर होने का एक हिस्सा आपके अहंकार को निगल रहा है। आप एक बेहतर डेवलपर नहीं हैं क्योंकि आप सब कुछ खरोंच से बनाते हैं। आप सिर्फ एक धीमे डेवलपर हैं। वही आपकी साइट बनाने के लिए जाता है।

मुफ़्त घटक या थीम ढूंढें

मैं अपना एचटीएमएल स्क्रैच से कभी शुरू नहीं करता हूं। मैं हमेशा कुछ पूर्व-निर्मित घटकों से शुरू करता हूं और वहां से जाता हूं।

एक महान मुफ्त विकल्प, दुष्ट ब्लॉक का उपयोग करने जा रहे थे।

मेरा मार्गदर्शन करने के लिए मेरी प्रेरणा साइट का उपयोग करते हुए, मैंने उपयोग करने के लिए निम्नलिखित ब्लॉकों को चुना।

मेरा हैडर

नायक

नीचे तह सामग्री है:

फ़ुटबाल

HTML में अपने ब्लॉक एक साथ रखें

इससे पहले कि हम अपनी साइट को अनुकूलित करना शुरू करें, आइए अपने ब्लॉकों को HTML में एक साथ रखें।

यह एक अच्छी शुरुआत है लेकिन DesignDo से पहले हमारे पास कुछ काम बाकी है जहां हम इसे चाहते हैं।

प्रतीक चिन्ह

फिर से, इसे सरल रखें!

मैं आमतौर पर अपनी साइटों के लिए टेक्स्ट-आधारित लोगो के साथ जाता हूं। मेरी साइट का नाम DesignDo है, तो वही मेरा लोगो होगा। मैं आमतौर पर पृष्ठभूमि के रूप में प्राथमिक रंग का उपयोग करूंगा और सफेद या काले पाठ का उपयोग करूंगा। पाठ का रंग सभी पठनीयता के बारे में है। इसलिए यदि आपके प्राथमिक रंग के ऊपर सफेद पाठ को पढ़ना कठिन है, तो काले पाठ का उपयोग करें और इसके विपरीत।

आप HTML लिखकर या इमेज एडिटर का उपयोग करके अपना लोगो बना सकते हैं।

यदि आप एक छवि संपादक का उपयोग करने का निर्णय लेते हैं, तो मैं Photopea की अनुशंसा करता हूं।

यह फोटोशॉप का नॉक-ऑफ है, यह मुफ़्त है, और यह आश्चर्यजनक है! आप टेक्स्ट के लिए अपने स्वयं के फोंट भी अपलोड कर सकते हैं।

DesignDo लोगो के लिए, मैं बस नाम को अतिरिक्त बोल्ड फ़ॉन्ट के साथ टेक्स्ट के रूप में उपयोग करने जा रहा हूं। पृष्ठभूमि मेरा प्राथमिक रंग होगा।

मैं लोगो को थोड़ा और चरित्र देने के लिए उसमें थोड़ा सा घुमाव भी जोड़ रहा हूँ। (यदि आप अधिक गंभीर डिजाइन के लिए जा रहे हैं तो ऐसा न करें।

एनएवी लिंक

एनएवी लिंक के साथ बहुत कुछ नहीं करना चाहिए। सुनिश्चित करें कि टेक्स्ट ग्रे या काला है। यदि आप टेक्स्ट के साथ आइकन जोड़ना चाहते हैं तो आप कर सकते हैं। Heroicons एक महान निःशुल्क आइकन लाइब्रेरी है जिसका मैं हर समय उपयोग करता हूं। यदि आप अधिक गंभीर साइट बना रहे हैं तो मैं इसका उपयोग करने का सुझाव दूंगा।

आप एक मज़ेदार/रचनात्मक साइट के लिए Heroicons का भी उपयोग कर सकते हैं। अगर मेरी साइट का व्यक्तित्व मज़ेदार और रचनात्मक है तो मैं आइकन के लिए इमोजी का उपयोग करना भी पसंद करता हूं।

DesignDo के लिए मेरे पास केवल 1 एनएवी लिंक है और मैं इस पर कुछ और ध्यान देने के लिए फायर इमोजी का उपयोग करूंगा।

नायक

क्योंकि हमने हमें एक शुरुआत देने के लिए Wickedblocks का उपयोग किया है, नायक अनुभाग में हमारे लिए करने के लिए बहुत कुछ नहीं है।

हमें बस कुछ टेक्स्ट अपडेट करने की जरूरत है। हमारे जैसे बड़े शीर्षक टैग के साथ काम करते समय, इसे इस तरह से संरचित करें जहां पहली पंक्ति दूसरी से लंबी हो। यह आंखों के लिए अधिक आकर्षक है।

हमें अपने मुझे सूचित करें बटन के रंग को हमारे प्राथमिक रंग में अपडेट करने की भी आवश्यकता है

विषय

एक बार फिर, हम इस बात से बहुत दूर नहीं हैं कि हम अपनी तह के नीचे की सामग्री को कैसे दिखाना चाहते हैं।

मैं आइकन महसूस नहीं कर रहा हूं। वे साइट के व्यक्तित्व के साथ नहीं जाते हैं। इसलिए मैं अपने विषय के अनुरूप कुछ और प्राप्त करने के लिए Heroicons तक पहुंचने जा रहा हूं।

वह बेहतर है! मैं आइकन की पृष्ठभूमि को अकेला छोड़ दूंगा क्योंकि यह हल्का भूरा है और हमारे गहरे रंग के आइकन और सफेद पृष्ठभूमि के साथ एक अच्छा कंट्रास्ट है। यह भी गोल है इसलिए यह बड़ी सीमा-त्रिज्या के हमारे विषय का अनुसरण करता है।

"छोटी लंबाई का शीर्षक" एक H2 है, लेकिन यह उसी शैली का उपयोग कर रहा है जैसा कि इसके नीचे विवरण दिया गया है। हम चाहते हैं कि टिप का शीर्षक अलग दिखे और पाठक का ध्यान आकर्षित करे। मैं इसका आकार और फ़ॉन्ट-वेट थोड़ा बढ़ाने जा रहा हूं (हम इसे इसके ऊपर H1 टैग से बड़ा नहीं चाहते हैं)।

अंत में, हम अपने स्वयं के डिज़ाइन युक्तियों के साथ दुष्ट ब्लॉकों से आए कुकी-कटर टेक्स्ट को अपडेट करेंगे!

सारांश

बहुत से लोग अपने स्वयं के हस्तनिर्मित CSS का उपयोग करके और मॉकअप बनाने के लिए Figma जैसे डिज़ाइन टूल का उपयोग करके चैंपियन बनते हैं। मैं सहमत हूं, वे दोनों महान चीजें हैं। लेकिन सच्चाई यह है कि, एक डेवलपर के रूप में, मेरे पास फिग्मा में विशेषज्ञ बनने या अपनी खुद की कस्टम सीएसएस लाइब्रेरी लिखने का समय नहीं है जिसे मैं प्रोजेक्ट से प्रोजेक्ट तक ले जा सकता हूं।

लेकिन मैं साधन संपन्न हो सकता हूं और तेज गति से अच्छे दिखने वाले डिजाइन बनाने के लिए इंटरनेट पर मुफ्त टूल और संसाधनों का उपयोग कर सकता हूं।

यदि आप इस पोस्ट में मेरे द्वारा बनाए गए प्रोजेक्ट को देखना चाहते हैं, तो इन लिंक्स का अनुसरण करें:

आप यहां DesignDo पा सकते हैं।

इस परियोजना के लिए रेपो यहाँ है ।

अगर आपको यह लेख अच्छा लगा हो, तो बेझिझक मेरे न्यूज़लेटर @ https:// thefreelancedev.com में शामिल हों

यहाँ भी प्रकाशित हो चुकी है।.